
<template>
  <div class="d1">
    <div v-for="(v, i) in 3" :key="i" class="d2">
      <div class="top">
        <p>原创</p>
        <a href="">更多&gt;</a>
      </div>
      <div class="context">
        <ul>
          <li v-for="(v, i) in newnum" :key="i">
            <img :src="v.img" alt="" />
            <p>{{ v.title | xiaoming }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      newnum: [
        {
          img: "imgs/q2.jpg",
          title: "美食万岁1111",
        },
        {
          img: "imgs/j2.jpg",
          title: "暴富转运",
        },
        {
          img: "imgs/j3.jpg",
          title: "纯色清新",
        },
      ],
    };
  },
  filters: {
    xiaoming(val) {
      if (val.length > 4) {
        return val.substr(0, 4) + "..";
      } else {
        return val;
      }
    },
  },
};
</script>

<style scoped>
.top {
  display: flex;
  margin-top: 0.4rem;
  justify-content: space-between;
}
.d2:nth-child(1) {
  margin-top: 1.3rem;
}
a {
  color: red;
  margin-right: 0.2rem;
  margin-top: 0.1rem;
}
ul {
  display: flex;
}
.d2:nth-child(3) {
  margin-bottom: 0.9rem;
}
li {
  width: 30%;
  height: 1.5rem;
  background-color: red;
  margin-left: 0.05rem;
  margin-top: 0.1rem;
}
li img {
  width: 100%;
  height: 100%;
}
p {
  text-align: center;
  margin-top: 10px;
}
</style>